<!--
 * @Author: hu_binbin
 * @Date: 2021-08-18 09:29:31
 * @LastEditTime: 2021-08-20 15:51:43
 * @Description: 登记隐患
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
            <template slot="header_icon">
				<van-image width="34" height="47" @click="rfidBtn" :src="icon.rfid" />
                <van-image width="34" height="47" @click="scanBtn" :src="icon.scan" />
			</template>
		</Theader>
        <div style="overflow-y: auto;height: 100%;padding-bottom: 3rem; margin-top: 3.5rem;">
            <div>
                <van-collapse class="collapse" v-model="activeNames">
                    <van-collapse-item name="1">
                      <template slot="title">
                        <div class="col-title">
                            <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                            <span style="margin-left: 0.4rem;">隐患设备</span>
                        </div>
                      </template>
                        <div class="lable-list">
                            <div class="card-item">
                                <van-image class="delet-class" width="20" height="20"  :src="icon.deleteRed" />
                                <div class="item-title">
                                    <div class="le">1#主变</div>
                                    <div style="text-align: left;">主变压器</div>
                                </div>
                                <div class="item-con">
                                    <div class="item-con-le">
                                        <span>电压等级：</span>
                                        <label>交流500kv</label>
                                    </div>
                                    <div class="item-con-ri">
                                        <span>设备型号:</span>
                                        <label>ZB41420-50</label>
                                    </div>
                                </div>
                                <div class="item-con">
                                    <div class="item-con-le">
                                        <span>投入日期:</span>
                                        <label>2000-08-01</label>
                                    </div>
                                    <div class="item-con-ri">
                                        <span>生产厂家：</span>
                                        <label>江苏电力</label>
                                    </div>
                                </div>
                            </div>
                            <div class="card-img">
                                <div class="item-img">
                                    <van-image class="delet-class" width="20" height="20"  :src="icon.deleteRed" /> 
                                    <div>RFID添加</div>
                                </div>
                                <div class="item-img">
                                    <van-image class="delet-class" width="20" height="20"  :src="icon.deleteRed" /> 
                                    <div>扫码添加</div>
                                </div>
                                <div class="item-img">
                                    <van-image class="delet-class" width="20" height="20"  :src="icon.deleteRed" /> 
                                    <div>搜索添加</div>
                                </div>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item name="2">
                        <template slot="title">
                            <div class="col-title">
                                <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                                <span style="margin-left: 0.4rem;">隐患信息</span>
                            </div>
                        </template>
                        <div class="lable-list">
                            <van-field 
                                label="隐患类型:"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="隐患来源:"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="隐患原因:"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="隐患所在单位:"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="行政地理位置"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <div>
                                <van-row class="defe-des">隐患简题:</van-row>
                                <div style="margin: 15px 0;border-radius: 5px;">
                                    <van-field class="textarea-content" disable v-model.trim="taskDetail.remark" rows="2" autosize type="textarea"
                                        placeholder="请填写...">
                                        <template slot="right-icon">
                                            <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                                        </template>
                                    </van-field>
                                </div>
                            </div>
                            <van-field 
                                label="专业分类"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="详细分类"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="隐患分类"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="隐患等级"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="归属职能部门"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <div>
                                <van-row class="defe-des">隐患描述：</van-row>
                                <div style="margin: 15px 0;border-radius: 5px;">
                                    <van-field class="textarea-content" disable v-model.trim="taskDetail.remark" rows="2" autosize type="textarea"
                                        placeholder="请填写...">
                                        <template slot="right-icon">
                                            <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                                        </template>
                                    </van-field>
                                </div>
                            </div>
                            <div>
                                <van-row class="defe-des">可能导致后果:</van-row>
                                <div style="margin: 15px 0;border-radius: 5px;">
                                    <van-field class="textarea-content" disable v-model.trim="taskDetail.remark" rows="2" autosize type="textarea"
                                        placeholder="请填写...">
                                        <template slot="right-icon">
                                            <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                                        </template>
                                    </van-field>
                                </div>
                            </div>
                            <van-field 
                                label="计划处理日期"  
                                readonly 
                                placeholder="请选择"
                                is-link
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-cell class="selRadio" title="已采取措施">
                                <template slot="default">
                                    <van-checkbox 
                                    shape="square" 
                                    checked-color="#17B39B"
                                    v-model="taskDetail.checked">已采取措施</van-checkbox>
                                </template>
                            </van-cell>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item name="3">
                        <template slot="title">
                            <div class="col-title">
                                <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                                <span style="margin-left: 0.4rem;">附件信息</span>
                            </div>
                        </template>
                        <div class="lable-list">
                            <div>
                                <van-cell 
                                    title="照片:" 
                                    required
                                    :border="false" 
                                />
                                <van-image class="imgSize" width="47" height="47" :src="icon.iconTitle" /> 
                            </div>
                            <div>
                                <van-cell 
                                    title="视频:" 
                                    required
                                    :border="false" 
                                />
                                <van-image class="imgSize" width="47" height="47" :src="icon.iconTitle" /> 
                            </div>
                            <div>
                                <van-cell 
                                    title="录音:" 
                                    required
                                    :border="false" 
                                />
                                <van-image class="imgSize" width="47" height="47" :src="icon.iconTitle" /> 
                            </div>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>

            <!--底部按钮-->
            <div class="btn">
                <van-button color="#17B39B" @click="submit" style="width: 90%;" size="small" type="primary">登记完成，提交隐患</van-button>
            </div>
        </div>
	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "newAddDanger",
		components:{
			Theader
		},
		data() {
			return {
                active: 0,
                title: "隐患登记",
                activeNames:["1"],
                taskDetail: {
                    substationName:"东善桥变",
                    voltageLevel:"500Kv",
                    patrolTypeName:"全面巡视",
                    cycleTime:"2月",
                    fristTime:"2021/07/07 18:30:00",
                    team:"变电运维一班",
                    tourWay:"人工巡视",
                    planTime:"2021/07/07 18:30:00",
                    nextTime:"2021/07/07 18:30:00",
                    require:"的撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
                },
                icon: {
                    iconTitle: require("../../../../assets/tour/icon-title.png"),
                    rfid: require("../../../../assets/tour/icon-rfid.png"),
                    scan:require('../../../../assets/tour/icon-scan.png'),
                    deleteRed:require('../../../../assets/tour/delet-red.png'),
                    
                },
                activeNames: ['1'],
                radio:1,
			}
		},
		computed: {

		},
		methods: {
            //rifid 
            rfidBtn() {

            },
            //扫描二维码
            scanBtn() {

            },
            /**
             * @description: 提交
             * @param {*}
             * @return {*}
             */
            submit() {
                this.$router.push({
                    name:"newDangerDetail"
                })
            }
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F0F0F0 ;
    }

    .lable-list /deep/ .van-cell{
        padding: 10px 0;
    }
    .lable-list /deep/ .van-field__label{
        width: 7rem;
    }
    .lable-list /deep/ .van-field__control{
        text-align: right;
    }
    
    .defe-des{
        color:#666;margin-top: 15px;
        font-size:0.8rem;
    }
    .textarea-content /deep/ .van-field__control{
        text-align: left;
    }
    .textarea-content{
        color:#333;
        font-size:0.875rem;
		border: 1px solid #E2E2E2;color:#999;
        padding-bottom: 1.5rem;
    }
    .textarea-content /deep/ .van-field__right-icon{
        position: absolute;
        bottom: -0.2rem;
        right: 0.5rem;
    }
    .imgSize{
        margin: 0 1rem;
    }
    .selRadio  /deep/ .van-cell__title{
        width: 80px;
        flex: inherit;
        color:#666;
    }
    .selRadio  /deep/ .van-cell__value{
        display: flex;
        justify-content:flex-end;
    }
    .btn{
        width: 100%;
        background: rgb(255, 255, 255);
        padding: 0.5rem 0px;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
    }
    

    .card-item{
        position: relative;
        border-radius: 0.5rem;
        border:1px solid #F3F3F3;
        font-size: 12px;
        color:#999;
        padding: 1rem;
        margin-bottom: 0.5rem;
    }
    .card-item .delet-class{
        position: absolute;
        right: -3%;
        top: -10%;
    }
    .card-item .item-title{
        font-size: 0.8725rem;
        color:#333;
    }
    .card-item .item-title,.card-item .item-con{
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.3rem;
    }
    .card-item .item-title .le{
        width: 50%;
    }
    .card-item .item-con .item-con-le{
        width: 50%;
        display: flex;
    }
    .card-item .item-con .item-con-ri{
        flex:1;
        display: flex;
        justify-content: flex-end;
    }
    
    
    .card-img{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .card-img .item-img{
        width: 25%;
        margin: 0.5rem;
        padding: 0.5rem;
        text-align: center;
        border: 1px solid#CCEFE9;
    }
    .card-img .item-img div{
        font-size: 12px;
        margin-top: 0.3rem;
    }

    /deep/ .van-collapse-item{
        margin: 0.5rem;
    }
</style>
